//放置着所有的模块定义 key模块ID 值是模块定义
var modules = {};
//已经加载的模块的缓存
var cache = {};

function require(moduleId) {
  if (cache[moduleId]) {
    return cache[moduleId];
  } else {
    var module = cache[moduleId] = { exports: {} };
    //执行模块定义方法，给module.exports赋值，导出对象就是module.exports
    modules[moduleId](module, module.exports, require);
    return module.exports;
  }
}
require.m = modules;//模块定义
require.c = cache;//模块的缓存
require.f={};
require.p = '';
require.r = (exports)=>{
  Object.defineProperty(exports,Symbol.toStringTag,{value:'Module'});
  Object.defineProperty(exports,'__esModule',{value:true});
}
require.d = (exports,definition)=>{
  for(var key in definition){
    Object.defineProperty(exports,key,{enumerable:true,get:definition[key]});
  }
}
/**
 * 
 * @param {*} chunkId src_video_js
 * @returns src_video_js.main.js
 */
require.u = (chunkId)=>chunkId+`.main.js`; //
/**
 * 
 * @param {*} url src_video_js.main.js
 */
require.l = (url)=>{
 let script = document.createElement('script');
 script.src = url;
 document.head.appendChild(script); //创造了<script src = 'src_video_js.main.js'></script>
}
//已经安装好或者加载中的代码块 0已经就绪的
var installedChunks = {main:0};
/**
 * 
 * @param {*} chunkId src_video_js
 * @param {*} promises []
 */
require.f.j = (chunkId,promises)=>{
  var installedChunkData;
  var promise = new Promise((resolve,reject)=>{
    installedChunkData=installedChunks[chunkId]=[resolve,reject]; //installedChunkData=installedChunks[src_video_js]=[resolve,reject]
  });
  promises.push(installedChunkData[2]=promise);//这个就是JSONP要加载的脚本的路径或者说名称 installedChunkData = [resolve,reject,promise] promises=[promise]
  var url = require.p + require.u(chunkId);  //url = src_video_js.main.js
  require.l(url);
}
/**
 * 
 * @param {*} chunkId src_video_js
 * @returns 
 */
require.e = (chunkId)=>{
  let promises = [];
  require.f.j(chunkId,promises); //这一步就是创建一个<script>标签和生产一个promise
  return Promise.all(promises);
}
/**
 * 
 * @param {*} param0 [ ['src_video_js'],{ "./src/video.js":func() }]
 */
var webpackJsonpCallback = ([chunkIds,moreModules])=>{
  debugger
  var moduleId,chunkId,i=0,resolves=[];
  for(;i<chunkIds.length;i++){
    chunkId=chunkIds[i];
    resolves.push(installedChunks[chunkId][0]);//resolves=[resolve] 把promise的resovle方法取出放到了resolves数组中
    installedChunks[chunkId]=0;//表示此代码块已经 加载完成 
  }
  for(let moduleId in moreModules){
    require.m[moduleId]= moreModules[moduleId]; //require.m['./src/video.js'] = modules['./src/video.js'] = func()   
  }
  //循环执行我们的所有的resolve方法，让promise完成
  while(resolves.length){
    resolves.shift()();
  }
}
//定义一个代码块加载的全局变量，它的值默认是一个空数组

var chunkLoadingGlobal = window["webpackChunk_2_bundle"]=[];
chunkLoadingGlobal.push = webpackJsonpCallback;
let playButton = document.getElementById('play');
playButton.addEventListener('click', () => {
  // debugger
  //./src/video.js => [src,video,js].join('_')
  require.e("src_video_js").then((data)=>{
    debugger
    // 第一次then的回调是为了去加载模块数据 把模块的数据返回了
    return require("./src/video.js");
  }).then(result => {
    debugger
    // 第二次then参数就是模块的数据module.exports
    console.log(result.default);
  });
});

// require.e加载一个额外的代码块  ===》  require.ensure 保证/加载
// require.f.j  ===》 require.f.jsonp 使用JSONP加载额外的代码
// require.l ===》 require.load 加载JSON脚本

// 在webpack里一切皆模块，每一个文件都是一个模块 js css ts jpg png 
// 相互依赖的模块组合在一起就是一个代码块chunk
// 1个chunk（代码块，一个chunk可以由多个module组成）对应一个bundle(打包构建生产的资源文件)
// 一旦出现了import()懒加载，那么被import的模块个它依赖的模块分割出去生产一个新的代码块


// 异步加载的基本流程
// 1.点击按钮
// 2.加载包含额外代码块的模块定义的JS文件
// 3.JS文件加载回来后JS脚本会执行
// 4.把新的模块定义合并到老的模块定义上
// 5.走正常的加载逻辑了，加载新的模块，让 Promise resolve,然后走then
